<template>
    <view class="content">
        <view class="draw-info">
			<swiper
				class="swiper"
				:autoplay="true"
				:interval="3000"
				:duration="500"
				:circular="true"
				:indicator-dots="isDots"
				indicator-active-color="#4BA1FE"
			>
				<swiper-item v-for="item in drawInfo.pic.split(',')">
					<view class="img-box">
					    <image class="image" mode="widthFix" :src="item"></image>
					</view>
				</swiper-item>
			</swiper>
            <view class="draw-content">
                <view class="title">奖品：{{ drawInfo.name || '' }}×{{ drawInfo.num || '' }}</view>
                <view class="condition">
                    <text class="text" v-if="drawInfo.type === 1">满{{ drawInfo.userCount }}人 自动开奖</text>
                    <text class="text" v-if="drawInfo.type === 2">{{ drawInfo.endTime }} 自动开奖</text>
					<view class="right">
						<block v-if="drawInfo.type === 1">差<text class="red">{{ drawInfo.userCount - drawInfo.users.length }}人</text>开奖</block>
						<block v-if="drawInfo.type === 2">
							倒计时
							<count-down
							background-color="#ffffff"
							color="#FF1A2E"
							borderColor="#ffffff"
							splitorColor="#FF1A2E"
							:day="couponTime[0]"
							:hour="couponTime[1]"
							:minute="couponTime[2]"
							:second="couponTime[3]"
							></count-down>
						</block>
					</view>
                </view>
            </view>
			<image class="draw-already" src="@/static/images/icon/draw-already.png" v-if="drawInfo.joined === 1 && drawInfo.isOpened === 0"></image>
			<image class="draw-already" src="@/static/images/icon/draw-finish.png" v-if="drawInfo.isOpened === 1"></image>
        </view>
		<view class="draw-adver">
			<view class="left">
				<image mode="widthFix" class="image" :src="drawInfo.providerIcon"></image>
				<view class="info">
					<view class="name">{{ drawInfo.providerName }}</view>
					<view class="desc">{{ drawInfo.providerMsg }}</view>
				</view>
			</view>
			<view class="btn" @tap="toMiniSoft()">逛一逛</view>
		</view>
		<view class="draw-rules">
			<text class="text" v-for="item in drawInfo.detailMsg.split(' ')">{{ item }}</text>
		</view>
		
		<view class="draw-detail opened" v-if="drawInfo.isOpened === 1">
			<image class="bg" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201203/832cc2f0-351b-11eb-aebd-674ee7900928.png"></image>
			<view class="front">
				<view class="draw-status" :class="[{ win : drawInfo.winning === 1 }]">{{ drawInfo.winning === 1 ? '恭喜您，中奖啦' : '很遗憾，您未中奖' }}</view>
				<view class="draw-title">中奖者名单</view>
				<view class="draw-result">奖品：{{ drawInfo.name }}×1</view>
				<view class="draw-name">{{ drawInfo.username }}</view>
				<image class="image" :src="drawInfo.headImg || require('@/static/images/default-avatar.png')"></image>
				<view class="draw-exchange" @tap="toReward()" v-if="drawInfo.winning === 1">去兑奖</view>
			</view>
		</view>
		
		<view class="draw-detail close" v-else>
			<view class="draw-btn" @tap="joinDraw()">{{ drawInfo.joined === 1 ? '去看看' : '参与抽奖' }}</view>
			<view class="draw-num">已有{{ drawInfo.users.length }}人参与<text v-if="drawInfo.users.length > 20">，<text class="open-btn" @tap="openDetail()">{{ openNumber === 16 ? '展开查看' : '收起信息' }}》</text></text></view>
			<view class="draw-list">
				<template v-for="(item, index) in drawInfo.users">
					<image class="image" v-if="index < openNumber" :src="item.headImg || require('@/static/images/default-avatar.png')"></image>
					<image class="image" v-if="index === 48 && openNumber === 47" src="@/static/images/icon/ellipsis.png"></image>
				</template>
			</view>
		</view>
		
		<view class="footer-bar">
			<button class="btn share" @tap="startShare()" v-if="!token">
				<image class="icon" src="@/static/images/icon/share.png"></image>
				<text class="text">分享赢抽奖券</text>
			</button>
			<button class="btn share" open-type="share" hover-class="none" v-else>
				<image class="icon" src="@/static/images/icon/share.png"></image>
				<text class="text">分享赢抽奖券</text>
			</button>
			<button class="btn more" @tap="toDrawList()">
				<image class="icon" src="@/static/images/icon/gift.png"></image>
				<text class="text">参与更多抽奖</text>
			</button>
		</view>

		<!--一次性消息订阅-->
		<!-- #ifdef MP-ALIPAY -->
		<subscribe-msg />
		<!-- #endif -->

		<!-- 快捷登录 -->
		<authorize ref="authorize" @authorizeSuccess="onRefresh"></authorize>
    </view>
</template>

<script>
	import { mapGetters } from 'vuex';
	import moment from '@/utils/packges/moment';
	import Authorize from '@/components/Authorize';
	import CountDown from "@/components/uni/CountDown";
    export default {
        name: "drawDetail",
		components: {
			Authorize,
			CountDown
		},
        data() {
            return {
				options: {},
                drawInfo: {},
				token: null,
				isReady: false,
				isDots: false,
				shareTemplate: [],
				openNumber: 16,
				couponTime: []
            }
        },
        onLoad(options) {
            this.options = options;

            this.getDrawInfo();
			
			this.$service.common.shareTemplate.list({
				type: 20
			}).then(res => {
				this.shareTemplate = res[0].split(' ');
			});

			uni.reportAnalytics('enter_choujiang_xiagnqing', {
				enter_choujiang_xiagnqing: 1
			});

			this.$store.dispatch('addVisitRecordUnAuthorized', { pageType : 12, floorId: options.id });
        },
		onShow() {
			if (uni.getStorageSync('stepToken')) {
				this.token = uni.getStorageSync('stepToken');
			} else {
				this.token = null;
			}
		},
		computed: {
			...mapGetters(['stepUserInfo', 'conf'])
		},
		methods: {
        	getDrawInfo() {
				uni.showLoading({
					title: '加载中...',
				});
				this.$service.activity.lotteryActivity.info({
					id: this.options.id
				}).then(res => {
					this.drawInfo = res;
					if (this.drawInfo.pic.split(',').length > 1) {
						this.isDots = true;
					}
					
					// 计算剩余时间
					let endTime = moment().format(this.drawInfo.endTime);
					let startTime = moment().format('YYYY-MM-DD HH:mm:ss');
					let daysLeft = moment(endTime).diff(startTime, 'days');
					let hoursLeft = moment(endTime).diff(startTime, 'hours') - daysLeft * 24;
					let minutesLeft =
						moment(endTime).diff(startTime, 'minutes') -
						daysLeft * 24 * 60 -
						hoursLeft * 60;
					let secondsLeft =
						moment(endTime).diff(startTime, 'seconds') -
						daysLeft * 24 * 60 * 60 -
						hoursLeft * 60 * 60 -
						minutesLeft * 60;
					this.couponTime = [daysLeft, hoursLeft, minutesLeft, secondsLeft];
					
					uni.hideLoading();
				});
			},
			onRefresh() {
				this.$store.dispatch('getStepUserInfo');
				this.getDrawInfo();
			},
			startShare() {
				this.$refs.authorize.open();
				uni.reportAnalytics('click_fenxiangycjq_cg', {
					click_fenxiangycjq_cg: 1
				});
			},
			joinDraw() {
        		let that = this;
				if (!uni.getStorageSync('stepToken')) {
					this.$refs.authorize.open();
					return false;
				}
				if (this.drawInfo.joined === 1) {
					this.browseProvider();
					uni.reportAnalytics('click_kanyikan', {
						click_kanyikan: 1
					});
				} else {
					if (Number(this.stepUserInfo.voucherCount) === 0) {
						uni.showModal({
							content: '您的抽奖券为0，前往兑换抽奖券？',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/draw/coupon'
									});
								}
							}
						});
						return false;
					}
					// #ifdef MP-ALIPAY
					const { requestSubscribeMessage } = requirePlugin('subscribeMsg');
					requestSubscribeMessage({
						entityIds: ['71374fe21bbc4729b560f818361179c1'],
						// 订阅回调
						callback() {
							// 参与抽奖
							that.$service.activity.lotteryActivity.add({
								id: that.options.id
							}).then(res => {
								uni.showToast({
									title: '参与抽奖成功！',
									icon: 'none'
								});
								that.getDrawInfo();

								uni.reportAnalytics('click_canyucj_cg', {
									click_canyucj_cg: 1
								});
							}).catch(err => {
								uni.showToast({
									title: err.message,
									icon: 'none'
								});
							});
						},
					});
					// #endif
				}
			},
			toDrawList() {
				uni.navigateTo({
					url: '/pages/draw/list'
				})

				uni.reportAnalytics('click_canyugdcj', {
					click_canyugdcj: 1
				});
			},
			// 浏览供应商
			browseProvider() {
				// 小程序
				if (this.drawInfo.linkType === 0) {
					let linkArr = this.drawInfo.link.split(';');
					if (linkArr.length === 2) {
						my.navigateToMiniProgram({
							appId: linkArr[0],
							path: linkArr[1]
						});
					} else if (linkArr.length === 3) {
						my.navigateToMiniProgram({
							appId: linkArr[0],
							path: linkArr[1],
							extraData: JSON.parse(linkArr[2]),
						});
					}
				} else if (this.drawInfo.linkType === 1) {
					// 生活号
					my.ap.navigateToAlipayPage({
						path: this.drawInfo.link
					});
				} else if (this.drawInfo.linkType === 2) {
					// H5
					uni.navigateTo({
						url: '/pages/index/webView?url=' + this.drawInfo.link
					})
				}
			},
			toReward() {
				uni.navigateTo({
					url: '/pages/draw/reward?id=' + this.options.id
				});
			},
			toMiniSoft() {
				this.browseProvider();

				uni.reportAnalytics('click_guangyiguang', {
					click_guangyiguang: 1
				});
			},
			openDetail() {
				if (this.openNumber === 16) {
					this.openNumber = 47;
				} else {
					this.openNumber = 16;
				}
			}
		},
		onShareAppMessage() {
			uni.reportAnalytics('click_fenxiangycjq_cg', {
				click_fenxiangycjq_cg: 1
			});
			const { shareFriendMainTemplate, shareFriendMainSubtitleTemplate, shareImageUrl } = this.conf;

			return {
				title: shareFriendMainTemplate,
				content: shareFriendMainSubtitleTemplate,
				desc: shareFriendMainSubtitleTemplate,
				path: '/pages/draw/detail?id=' + this.options.id,
				bgImgUrl: shareImageUrl,
				success: () => {
					this.$service.activity.voucher.shareAward().then(res => {
						setTimeout(() => {
							uni.showToast({
								title: '恭喜你分享成功，获得1张抽奖券',
								icon: 'none'
							});
						}, 2000);

						this.$store.dispatch('getStepUserInfo');
					})
				}
			};
		},
    }
</script>

<style lang="scss" scoped>
.content {
	padding-top: 22rpx;
	padding-bottom: 150rpx;
    .draw-info {
        width: 708rpx;
        margin: 0 auto 22rpx;
        padding: 16rpx;
		box-sizing: border-box;
        border-radius: 16rpx;
        background: #fff;
		position: relative;
        .img-box {
            width: 676rpx;
            height: 300rpx;
            border-radius: 8rpx;
            overflow: hidden;
            @include flexBox(center, center);
            .image {
                width: 676rpx;
            }
        }
        .title {
            color: #333333;
            font-size: 32rpx;
            margin-top: 28rpx;
        }
        .condition {
            color: #7A7A7A;
            font-size: 28rpx;
			margin-top: 14rpx;
			@include flexBox(space-between, center);
			.right {
				@include flexBox(center, center);
				.red {
					color: #FF1A2E;
				}
			}
        }
		.draw-content {
			.title {
				z-index: 10;
				position: relative;
			}
		}
		.draw-already {
			width: 86rpx;
			height: 76rpx;
			position: absolute;
			right: 52rpx;
			bottom: 58rpx;
			z-index: 1;
		}
    }
	.draw-adver {
		height: 140rpx;
		width: 708rpx;
		margin: 22rpx auto;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background: url('https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20210127/d33c5d30-6079-11eb-9a72-e936383b6ae5.png');
		background-size: 100% 100%;
		@include flexBox(space-between, center);
		.left {
			width: 530rpx;
			@include flexBox(flex-start, center);
			.image {
				width: 100rpx;
				border-radius: 8rpx;
			}
			.info {
				width: 400rpx;
				margin-left: 24rpx;
				.name {
					color: #fff;
					font-size: 32rpx;
				}
				.desc {
					color: #fff;
					font-size: 28rpx;
					margin-top: 8rpx;
					width: 100%;
					@include ellipsis(1);
				}
			}
		}
		.btn {
			background: #fff;
			width: 120rpx;
			height: 52rpx;
			color: #4BA1FE;
			font-size: 28rpx;
			box-shadow: 0px 6rpx 12rpx #42A6E5;
			border-radius: 8rpx;
			@include flexBox(center, center);
		}
	}
	.draw-rules {
		width: 708rpx;
		margin: 22rpx auto;
		padding: 16rpx 16rpx 6rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background: #fff;
		@include flexBox(flex-start, flex-start, column);
		.text {
			font-size: 26rpx;
			color: #333;
			margin-bottom: 10rpx;
			line-height: 36rpx;
		}
	}
	.draw-detail {
		width: 708rpx;
		margin: 22rpx auto;
		padding: 24rpx 34rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background: #fff;
		@include flexBox(center, center, column);
		&.close {
			.draw-btn {
				width: 200rpx;
				height: 200rpx;
				box-sizing: border-box;
				border: 12rpx solid #fff;
				background: #E35151;
				border-radius: 50%;
				@include flexBox(center, center);
				color: #fff;
				font-size: 32rpx;
				box-shadow: 0px 2rpx 12rpx rgba(227, 81, 81, 0.16);
			}
			.draw-num {
				margin: 20rpx auto 10rpx;
				font-size: 28rpx;
				color: #363636;
				.open-btn {
					color: #4BA1FE;
				}
			}
			.draw-list {
				
				@include flexBox(flex-start, flex-start, null, wrap);
				.image {
					width: 64rpx;
					height: 64rpx;
					margin-right: 18rpx;
					margin-top: 10rpx;
					&:nth-child(8n) {
						margin-right: 0;
					}
				}
			}
		}
		&.opened {
			height: 458rpx;
			padding: 20rpx 0 28rpx;
			position: relative;
			.bg {
				width: 100%;
				height: 100%;
				position: absolute;
			}
			.front {
				position: relative;
				height: 100%;
				width: 100%;
				@include flexBox(flex-start, center, column);
				.draw-status {
					color: #373737;
					font-size: 40rpx;
					font-weight: 600;
					&.win {
						color: #FF1A2E;
					}
				}
				.draw-title {
					color: #333333;
					font-size: 32rpx;
					margin-top: 46rpx;
				}
				.draw-result {
					color: #FF1A2E;
					font-size: 32rpx;
					margin-top: 16rpx;
					margin-bottom: 22rpx;
				}
				.draw-name {
					color: #7A7A7A;
					font-size: 28rpx;
				}
				.image {
					width: 64rpx;
					height: 64rpx;
					margin-top: 12rpx;
				}
				.draw-exchange {
					color: #169BD5;
					font-size: 28rpx;
					margin-top: 34rpx;
				}
			}
		}
	}
	.footer-bar {
		width: 100%;
		height: 114rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		padding: 16rpx 28rpx;
		box-sizing: border-box;
		@include flexBox(space-between);
		.btn {
			width: 320rpx;
			height: 84rpx;
			line-height: 84rpx;
			border-radius: 8rpx;
			font-size: 30rpx;
			border: 2rpx solid #4BA1FE;
			box-sizing: border-box;
			padding: 0;
			margin: 0;
			@include flexBox(center, center);
			&::after {
				border: none;
			}
			.icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
			&.share {
				background: #4BA1FE;
				color: #fff;
			}
			&.more {
				background: #fff;
				color: #4BA1FE;
			}
		}
	}
}
</style>